<template>
	<view class="pageItem">
		<view class="logo">
			<image class="logo_img" src="/static/logo.png" mode="widthFix"></image>
			<view class="l_txt">{{$t('locale.app')}}</view>
		</view>
		<view class="main_item">
			<!-- <view class="input_box">
				<view class="iconfont icon">&#xe6a7;</view>
				<input class="inp" type="text" v-model="username" :placeholder="$t('public.name_tip')"  placeholder-class="input_no_txt"/>
			</view> -->
			<view class="input_box">
				<view class="iconfont icon">&#xe678;</view>
				<input class="inp" type="text" v-model="email" :placeholder="$t('public.mail_tip')"
					placeholder-class="input_no_txt" />
			</view>

			<view class="input_box">
				<view class="iconfont icon">&#xe677;</view>

				<block v-if="is_see == 0">
					<input class="inp" type="password" v-model="pass" :placeholder="$t('public.password_tip')"
						placeholder-class="input_no_txt" />
					<view class="see iconfont" @click="set_see(1)">&#xe604;</view> <!-- 闭眼 -->
				</block>
				<block v-else>
					<input class="inp" type="text" v-model="pass" :placeholder="$t('public.password_tip')"
						placeholder-class="input_no_txt" />
					<view class="see iconfont" @click="set_see(0)">&#xe6b5;</view> <!-- 睁眼 -->
				</block>
			</view>

			<view class="input_box">
				<view class="iconfont icon">&#xe677;</view>
				<input class="inp"  type="text" v-model="email_code" :placeholder="$t('驗證碼')"
					placeholder-class="input_no_txt" />
				<button plain="false" class="yzm" @click="getCode" :disabled="disabled">

					<span v-if="timestatus">{{countdown}}</span>
					<span v-else>{{$t('獲取驗證碼')}}</span>
					<text v-show="timestatus">{{$t('秒重獲')}}</text>
				</button>
			</view>

			<view class="m_btn sub" @click="loginFun">{{$t('找回密碼')}}</view>
			<!-- <view class="m_tip">
				{{$t('public.has_account')}}
				<label class="tip2" @click="$gotopage" data-url="/pages/public/login">{{$t('public.login_txt')}}</label>
			</view> -->
			<view class="agree">
				<view class="iconfont a_icon" v-if="!agree" @click="agreeChange(true)">&#xe731;</view>
				<view class="iconfont a_icon a_icon_s" v-if="agree" @click="agreeChange(false)">&#xe730;</view>
				<view class="a_txt">
					{{$t('public.agree_txt')}}
					<view class="a_t2" @click="$r('/pages/news/newsDetail?ori=xy')">《{{$t('public.user_cc')}}》</view>
					<view class="a_t2" @click="$r('/pages/news/newsDetail?ori=ys')">《{{$t('public.privacy_cc')}}》</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_see: 0,
				agree: false,
				username: '',
				email: '',
				pass: '',
				email_code: '',
				flag: false,
				invite_code: '',
				countdown: '获取验证码',
				disabled: false,
				timestatus: false,
				clear: '',
			};
		},
		onLoad() {
			let code = uni.getStorageSync('invite_code') || 0;
			if (code) {
				this.invite_code = code;
				this.flag = true;
			}
		},
		methods: {
			set_see(flag) {
				this.is_see = flag;
			},
			loginFun() {
				uni.$u.throttle(this.real_reg, 800);
			},
			real_reg() {
				if (!this.agree) {
					uni.showToast({
						title: this.$t('public.cc_tip'),
						icon: "none"
					})
					return
				}
				if (this.email == '' || this.pass == '') {
					this.showMsg(this.$t('system.tip25'));
					return false;
				}
				
				
				const {
					email,
					pass,
					email_code
				} = this;
				let param = {
					email,
					pass,
					email_code
				};
				
				// console.log(param)
				let url = this.site_url + 'api/login/resetPwd';
				this.areq(url, param, 'POST').then(res => {
					if (res.code == 1) {
						this.showMsg(res.msg)
						setTimeout(() => {
							this.$r('/pages/public/login')
						}, 1500);
					} else {
						this.showMsg(res.msg)
					}
				})

			},
			agreeChange(_flag) {
				this.agree = _flag;
			},
			// 获取验证码
			getCode() {
				var that = this;
				// if (!that.phone) {
				// 	that.Msg.Fail('手机号不能为空');
				// 	return;
				// }

				that.disabled = true; //禁用点击
				that.disabled = true; //禁用点击
				that.countdown = 60;
				that.timestatus = true;
				that.clear = setInterval(that.countDown, 1000);

				let url = that.site_url + 'api/login/sendMail';
				that.areq(url, {
					email: that.email
				}, 'POST').then(res => {
					if (res.code == 1) {
						that.showMsg(res.msg)

					} else {
						that.showMsg(res.msg)
						that.countdown = 0;
						//that.disabled = false; //禁用点击
					}
				})


			},
			// 倒计时
			countDown() {
				var that = this;
				if (!that.countdown) {
					that.disabled = false;
					that.timestatus = false;
					that.countdown = '获取验证码';
					clearInterval(that.clear);
				} else {
					--that.countdown;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $main_color3;
	}

	.logo {
		width: 100%;
		height: 60vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: $main_color2;

		.logo_img {
			width: 18vw;
			height: 18vw;
		}

		.l_txt {
			font-size: 4vw;
			color: #fff;
			font-weight: bold;
			padding-top: 5vw;
			letter-spacing: 0.5vw;
		}
	}

	.main_item {
		width: 100%;
		padding: 10vw 10% 0;

		.input_box:not(:first-of-type) {
			margin-top: 4vw;
		}

		.input_box {
			width: 100%;
			height: 15vw;
			border: 1rpx solid $main_color2_s;
			display: flex;
			align-items: center;
			padding: 2vw 4vw;
			border-radius: 2vw;
			position: relative;

			.see {
				color: #fff;
			}

			.icon {
				width: 6vw;
				text-align: center;
				font-size: 5vw;
				color: $main_color_s2;
			}

			.inp {
				flex: 1;
				padding: 0 4vw;
				line-height: 11vw;
				font-size: 4.2vw;
				color: #fff;
			}
		}

		.m_btn {
			margin-top: 6vw;
			width: 100%;
			height: 13vw;
			line-height: 13vw;
			border-radius: 2vw;
			text-align: center;
			font-size: 4.2vw;
			background: $main_color_s2;
			color: $main_color5;
			font-weight: bold;
			letter-spacing: 1vw;
		}

		.m_tip {
			width: 100%;
			margin-top: 8vw;
			text-align: center;
			font-size: 3.8vw;
			color: $main_color4;

			.tip2 {
				margin-left: 2vw;
				color: $main_color;
			}
		}

		.agree {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3.6vw;
			color: #999999;
			margin-top: 11vw;

			.a_icon {
				width: 5vw;
				height: 5vw;
				font-size: 4vw;
				color: #C8C8C8;
				margin-right: 2vw;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.a_icon_s {
				color: $main_color;
				background: $main_color2;
			}

			.a_txt {
				display: flex;
				align-items: center;
				line-height: 5vw;

				.a_t2 {
					color: $main_color;
				}
			}
		}
	}

	.yzm {
		font-size: 3.5vw;
		color: #fff !important;
		font-weight: bold;
		position: absolute;
		line-height: 15vw;
		right: 0.3vw;
		top: 0;
		outline: none;
		border: 0px solid #333 !important;
		background-color: transparent !important;
	}

	.yzm text {
		color: #fff;
	}
</style>